<template>
  <el-descriptions v-loading="loadding" :column="1" label-align="right" :border="true">
    <el-descriptions-item label="货物名称">{{ productDetail.productName }}</el-descriptions-item>
    <el-descriptions-item label="规格数量">
      <el-table ref="table" :data="productDetail.specs" border stripe style="width: 100%">
        <el-table-column prop="sku" label="SKU" width="180" />
        <el-table-column prop="specName" label="规格名称" width="180" />
        <el-table-column v-for="(item, index) in productDetail.attrs" :key="index" :label="item.name">
          <template #default="scope">
            {{ scope.row.productSpecAttrs.find(attr => attr.attrId === item.id)?.attrValue }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="180">
          <template #header>
            数量
            <el-input v-model="quickQuantity" type="number" size="small" style="width: 80px" />
          </template>
          <template #default="scope">
            <el-input v-model="scope.row.quantity" type="number" style="width: 100%" />
          </template>
        </el-table-column>
      </el-table>
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
import { ref, shallowRef, PropType, useTemplateRef, watchEffect, watch } from "vue";
import { getProductDetail } from "@/api/product/productApi";
import { errorMsg } from "@/utils/message";

const loadding = ref(true);
const quickQuantity = ref<number>();
const productDetail = shallowRef<ShopProductDetailVo>({} as ShopProductDetailVo);
const specInfo = defineModel({
  type: Object as PropType<ShopProductSpecInboundOrderAddRequest["specInfos"]>,
  required: true
});
const { productId } = defineProps({
  productId: {
    type: Number,
    required: true
  }
});
const table = useTemplateRef("table");
const specs = ref<ShopProductSpecDetailVo[]>([]);
getProductDetail(productId).then(res => {
  if (res.code === RESPONSE_CODE.SUCCESS) {
    productDetail.value = res.data;
    loadding.value = false;
    specs.value = res.data.specs;
  } else {
    errorMsg("获取货物信息失败");
  }
});

watchEffect(() => {
  specInfo.value = specs.value.map(spec => ({
    specId: spec.id,
    quantity: spec.quantity
  }));
});
watch(quickQuantity, newVal => {
  if (newVal) {
    specs.value.forEach(spec => {
      spec.quantity = newVal;
    });
  }
});
</script>
